<template>
  <div class="pad-content-box form-no-padding-box">
    <el-form label-width="130px" size="small" :model="searchParams">
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="收款批次" prop="batchNo">
            <el-input v-model="searchParams.batchNo" readonly ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款公司" prop="payer">
            <el-input v-model="searchParams.payer" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款账户">
            <el-input v-model="searchParams.paymentAccount" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款人">
            <el-input v-model="searchParams.operatorName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称" prop="customerInfoName">
            <el-input v-model="searchParams.customerInfoName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款方式" prop="paymentMethodName">
            <el-input v-model="searchParams.paymentMethodName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款日期" prop="collectionTime">
            <el-date-picker 
              v-model="searchParams.collectionTime" 
              value-format="timestamp"
              type="date"
              readonly> 
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收款金额" prop="receivedAmount">
            <el-input v-model="searchParams.receivedAmount" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="款项类别" prop="fundsTypeItemName">
            <el-input v-model="searchParams.fundsTypeItemName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行流水号" prop="serialNumber">
            <el-input v-model="searchParams.serialNumber" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注" prop="remark">
            <el-input  v-model="searchParams.remark" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table v-if="searchParams.fundsTypeItem!='11'" class=" has-tab-header-border new-table-style" :border="true" size="small" :data="searchParams.detailItemList" align="center">
      <el-table-column label="序号" type="index" align="center" width="55"></el-table-column>
      <el-table-column label="客户" prop="customerNameList" align="center" width="160">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.customerNameList" :key="index">{{item}}</div>
        </template>
      </el-table-column>
      <el-table-column label="费项名称" prop="bizTypeName" align="center" width="90"></el-table-column>
      <el-table-column label="资产编号" prop="chargeItemName" align="center" width="90"></el-table-column>
      <el-table-column label="应缴日期" prop="paymentDeadline" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.paymentDeadline | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计费开始日期" prop="cycleStartTime" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleStartTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计费结束日期" prop="cycleEndTime" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总金额" prop="amountReceivable" align="taxAmount" width="90"></el-table-column>
      <el-table-column label="未结金额" prop="remainingAmount" align="center" width="100"></el-table-column>
      <el-table-column label="本次收款金额" prop="paymentAmount" align="center" width="120"></el-table-column>
      <el-table-column label="不含税金额" prop="excludingTaxAmount" align="center" width="110"></el-table-column>
      <el-table-column label="税额" prop="taxAmount" align="center" width="90"></el-table-column>
      <el-table-column label="合同编号" prop="contractCode" align="center" width="130"></el-table-column>
      <el-table-column label="操作内容" prop="operatorDesc" align="center" width="130"></el-table-column>
      <el-table-column label="操作时间" prop="operatorDate" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.operatorDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { actualIncomDetail } from '../../../api/receiptRefundAccount';
  export default {
    name: 'bill',
    props:{
      accountRechargeKey:{
        type:String,
        default:''
      }
    },
    data() {
      return {
        searchParams:{}
      };
    },
    mounted() {
      
    },
    methods: {
      init(){
        this.getActualIncomDetail()
      },
      async getActualIncomDetail(){
        let res = await actualIncomDetail(this.accountRechargeKey)
        this.searchParams = res
      },
      closeDialog(data){
        this.$emit('closeDialog',data)
      }
    },
  };
</script>

<style lang="scss" scoped>
  .line-box {
    width: 1px;
    height: 80px;
    background: #D8D8D8;
  }

  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  .sale-add{
    display: flex;
    justify-content: space-between;
    margin-bottom:20px;
    .sale-title{
      font-size: 16px;
      font-weight: bold;
      color: #666;
      height: 30px;
      line-height: 30px;
    }
    .sale-title-right{
      display: flex;
      justify-content: flex-start;
    }
    .add{
      background: #409EFF;
      padding:0 15px;
      color:#fff;
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
      cursor: pointer;
    }
    .cancel{
      margin-left: 10px;
      background: #F56C6C;
      padding:0 15px;
      color:#fff;
      height: 30px;
      line-height: 30px;
      border-radius: 3px;
    }
  }
</style>
